<template>
  <el-form ref="ruleForm" :model="sysDictItem" :rules="rules" label-width="150px" class="demo-ruleForm dict-form">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="字典条目key" prop="itemKey">
            <el-input v-model="sysDictItem.itemKey" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="字典条目value" prop="itemValue">
            <el-input v-model="sysDictItem.itemValue" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="拓展字段0" prop="ext">
            <el-input v-model="sysDictItem.ext" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="拓展字段1" prop="ext1">
            <el-input v-model="sysDictItem.ext1" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="拓展字段2" prop="ext2">
            <el-input v-model="sysDictItem.ext2" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-form-item label="备注" prop="remark">
      <el-input v-model="sysDictItem.remark" type="textarea" />
    </el-form-item>
    <el-form-item style="text-align: center;">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="$router.back(-1)">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { save } from '@/api/sys/dict/item/index'

export default {
  data() {
    return {
      sysDictItem: {
        dictKey: this.$route.query.dictKey,
        itemKey: '',
        itemValue: '',
        ext: '',
        ext1: '',
        ext2: '',
        remark: ''
      },
      rules: {
        itemKey: [
          { required: true, message: '请输入字典条目key', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        itemValue: [
          { required: true, message: '请输入字典条目value', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        ext: [
          { required: false, message: '请输入拓展字段1', trigger: 'blur' }
        ],
        ext1: [
          { required: false, message: '请输入拓展字段1', trigger: 'blur' }
        ],
        ext2: [
          { required: false, message: '请输入拓展字段1', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请填输入字典条目备注', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.sysDictItem).then(() => {
            this.loading = false
            this.$router.push({ name: 'dictitem_mgr_list', query: { dictKey: this.$route.query.dictKey }})
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.dict-form{
  padding-top: 30px;
  padding-right: 30px;
}
</style>
